import React, { Component } from 'react'

/** 引入布局组件 */
import {
    Layout
} from '../../components'

class UserIndex extends Component {

    constructor() {
        super()
        this.state = {
            img0: ''
        }
    }

    pickFile = evt => {
        let file = evt.target.files[0]
        var fr = new FileReader()
        fr.onload = () => {
            var img = new Image()
            img.onload = () => {
                let canvas = document.createElement('canvas')
                canvas.width = 720
                canvas.height = 720 / (img.width / img.height)

                let ctx = canvas.getContext('2d')
                ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100)
                let text = canvas.toDataURL()
                this.setState({
                    img0: text
                })
            }
            img.src = fr.result
        }
        fr.readAsDataURL(file)
    }

    render() {
        return (
            <div>
                <input onChange={this.pickFile} type='file'/>
                <img src={this.state.img0}/>
            </div>
        )
    }
}
export default Layout(UserIndex, {title: '我', showFooter: true})